<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>p2p webrtc</title>
    <style>
      body {
        background-color: aliceblue;
      }
      .title {
        text-align: center;
        margin: 50px 0;
      }
      .container {
        width: 500px;
        margin: 100px auto;
        padding: 30px;
        border-radius: 10px;
        border: 1px solid #ebeef5;
        box-shadow: 0 2px 12px 0 rgba(142, 131, 248, 0.8);
        color: #303133;
      }
      @media screen and (max-width: 1000px) {
        .container {
          width: 70vw;
        }
      }
      ol li {
        margin: 20px 0;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1 class="title">操作流程</h1>
      <ol>
        <li>
          打开 <a href="/p2p?type=answer" target="_blank">接收方页面</a>；
        </li>
        <li>打开 <a href="/p2p?type=offer" target="_blank">发起方页面</a>；</li>
        <li>确认双方都已建立ws连接；</li>
        <li>发起方点击 start 按钮。</li>
      </ol>
    </div>
  </body>
</html>
